<template>

<div class="hongbao">
     <div class="wrapper">
          <div class="title-box"></div>
          <div class="hongbao-box" >
            <ul>
              <li v-for="(item, name,index) in items" :key="index" v-bind:style="{backgroundPosition:'0px '+item+'px',left:(Math.random()*(240+1))-10+'px',animationName:index%2==0 ?'drop1':'drop2',animationDuration:(Math.random()*(2-1+1)+1)+'s'}" ></li>
            </ul>
            <ul class="money">
              <li v-for="(item, name,index) in money" :key="index" v-bind:style="{backgroundPosition:'0px '+item+'px',left:(Math.random()*(280+1))-10+'px',animationName:index%2==0 ?'drop1':'drop2',animationDuration:(Math.random()*(9-4+1)+4)+'s'}" ></li>
            </ul>
          </div>
          <div class="package">
            <div class="titlimg problem" v-if="titlimg" :style="{backgroundImage:'url(http://q1.qlogo.cn/g?b=qq&nk='+titlimg+'&s=100)'}"></div>
            <p class="title">{{text}}</p>
            <p class="text-btn" @click="problembtn">点此拆开</p>
          </div>

          <div class="footer-box" >
          </div>
      </div>
      <div class="backgroundbar">
        
        <div class="radio" v-if="data">
              <p>{{data.firstchoose[0]}}</p>
              <div class="ui-form-item ui-border-b">
                  <div class="ui-select">
                      <select name="level" v-model="couponSelected">
                          <option :value="data.firstchoose[2]" selected="selected">{{data.firstchoose[2]}}</option>
                          <option :value="data.firstchoose[1]" >{{data.firstchoose[1]}}</option>
                      </select>
                  </div>
              </div>
        </div>

        <div class="questions">
          <ul>
            <li v-for="(item,index) in data.problemset" :key="item">
              <p>{{item}}</p>
              <input type="text" v-model="list[index]">
          </li>
          </ul>
        </div>

        <div class="cheat" v-if="data && data.spoof">
            <p>{{data.spoof[0]}}</p>
            <div class="ui-form-item ui-form-item-radio ui-border-b">
                <label class="ui-radio" for="radio">
                    <input type="radio" :value="data.spoof[1]" v-model="choose">
                </label>
                <p>{{data.spoof[1]}}</p>
            </div>
            <div class="ui-form-item ui-form-item-radio ui-border-b">
                <label class="ui-radio" for="radio">
                    <input type="radio"  :value="data.spoof[2]" v-model="choose">
                </label>
                <p>{{data.spoof[2]}}</p>
            </div>
        </div>
        <div class="btn-box"><button class="problembtn" @click="resultsData">提交答卷</button></div>
        
      </div>
</div>

</template>
<script>
// @ is an alias to /src

import {hongbaolist} from '@/utils'
import { setTimeout } from 'timers';

export default {
  name: 'hongbao',
  created(){
      this.getproblemInfo()
      setTimeout(()=>{
        this.couponSelected = this.data.firstchoose[1]
        if(this.data.spoof){
          this.choose = this.data.spoof[2]
        }
      },1000)
  },
  data(){
    return{
      titlimg:'',
      data:'',
      text:"恭喜发财！",
      items:{
        img1:0,
        img2:125,
        img3:513,
        img4:642,
        img5:900,
        img6:1158,
        img7:1287,
        img8:254,
        img9:384
      },
      money:{
        img1:3,
        img2:16,
        img3:28,
        img4:45,
        img5:3,
        img6:16,
        img7:28,
        img8:45,
        img9:16
      },
      list:[],
      couponSelected:'',
      choose:''
    }
  },
  methods:{
    problembtn:function(){
      let problem = document.querySelector('.problem')
      let backgroundbar = document.querySelector('.backgroundbar')
      let packages = document.querySelector('.package')
      problem.classList.add('problembtn')
      packages.classList.add('boxup')
      setTimeout(function(){
        backgroundbar.style.bottom='0'
      },4000);
    },
    async getproblemInfo(){
      const data = await hongbaolist(this.$route.query.id)
      if(data.code == "200"){
        let listInfo = data.data[0]
        this.titlimg = listInfo.headurl;
        this.data = listInfo;
        document.title = '@'+listInfo.username+'发了一个红包';
      }else{
        this.$router.push('/404')
      }
    },
    resultsData(){
      if( this.istextempty(this.list) && this.couponSelected){
        let resultList = {"firstchoose":this.couponSelected,"problemset":this.list,"uid":[this.$route.query.id]}
        if(this.choose.length){
          resultList.spoof = this.choose;
        }
        this.$store.commit('updataResult',resultList)
        this.$router.push('/results')
      }
      
    },
    istextempty(list){
        let state = list.filter((text)=>{
            if (text.toString().length != 0 && text.toString().match(/^[ ]*$/) == null){
                return true
            }
        })
        if(list.length ==this.data.problemset.length && list.length == state.length){
            return true
        }
    }
  }
}
</script>
<style scoped >
@import '~@/assets/hongbao/style.css';
@import '~@/assets/hongbao/style1.css';
</style>
